import { Button, Icon, Modal, Progress, message } from "antd";
import React from "react";
import styles from "../index.less"
import changeIcon from "@/assets/changeIcon.png"
import { languageModelChange, languageModelCurrent, languageModelTest } from "@/services/languageModel";

let percentInterval = null
class ChangeModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      nextModel: {},
      currentModelName: "",
      showPart: "show",
      testResult: {
        type: 1,//1：测试中 2：测试失败 3：测试成功
        result: ""
      },
      percent: 0
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  initModal = (nextModel) => {
    this.setState({ visible: true, nextModel, showPart: "show" }, () => {
      this.getCurrentModel()
    })
  }

  cancelModal = () => {
    clearInterval(percentInterval)
    percentInterval = null
    this.setState({
      visible: false,
      nextModel: {},
      currentModelName: "",
      showPart: "show",
      testResult: {
        type: 1,//1：测试中 2：测试失败 3：测试成功 4:切换中
        result: ""
      },
      percent: 0
    })
  }

  getCurrentModel = async () => {
    const { applicationId } = this.props;
    const res = await languageModelCurrent({ applicationId: applicationId })
    console.log(res);
    this.setState({ currentModelName: res.data ? res.data : '' })
  }

  doNext = () => {
    const { showPart } = this.state;
    if (showPart === "show") {
      this.setState({
        showPart: "test",
        testResult: {
          type: 1,//1：测试中 2：测试失败 3：测试成功
          result: ""
        },
        percent: 0
      }, () => {
        percentInterval = setInterval(() => {
          let { percent } = this.state;
          if (percent == 75) {
            clearInterval(percentInterval)
            percentInterval = null
            this.doTest()
          } else {
            percent = percent + 25
            this.setState({
              percent
            })
          }
        }, 600)
      })
    }
  }

  doTest = async () => {
    const { nextModel } = this.state;
    const res = await languageModelTest({ id: nextModel.id, question: "你好" })
    if (res.data) {
      this.setState({
        testResult: {
          type: 3,
          result: "成功"
        },
        percent: 100
      })
    } else {
      this.setState({
        testResult: {
          type: 2,
          result: "失败"
        },
        percent: 100
      })
    }
    console.log(res);
  }

  doCheck = () => {
    this.setState({ testResult: { type: 4, result: "切换中" }, percent: 0 }, () => {
      this.doChange()
    })
  }

  doChange = async () => {
    const { nextModel } = this.state;
    const { applicationId } = this.props;
    const res = await languageModelChange({ modelId: nextModel.id, applicationId })
    this.setState({ percent: 100 }, () => {
      if (res.code == -1) { } else {
        message.info(res.message)
        this.cancelModal()
        this.props.freshList()
      }
    })
  }

  componentWillUnmount() {
    console.log('离开了当前页面');
    clearInterval(percentInterval)
    percentInterval = null
  }

  render() {
    const { visible, nextModel, currentModelName, showPart, testResult, percent } = this.state;
    const nameStyle = {
      marginRight: 10,
      fontSize: '16px',
      fontFamily: 'PingFang SC',
      fontWeight: 'bold'
    }
    const renderTips = () => {
      let info = {
        type: "loading",
        iconColor: "#3E5BFF",
        textColor: "#000000",
        text: "模型测试响应中请稍后"
      }
      switch (testResult.type) {
        case 2:
          info = {
            type: "close-circle",
            iconColor: "#FF5967",
            textColor: "#FF5967",
            text: "模型测试响应失败"
          }
          break;
        case 3:
          info = {
            type: "check-circle",
            iconColor: "#65B85D",
            textColor: "#65B85D",
            text: "模型测试响应成功"
          }
          break;
        case 4:
          info.text = "正在切换中"
          break;
      }
      return (
        <div style={{ marginBottom: 37 }}>
          <Icon type={info.type} style={{ color: info.iconColor, marginRight: 18, fontSize: '18px' }} />
          <span style={{ ...nameStyle, color: info.textColor }}>{nextModel.name}</span>
          <span style={{ ...nameStyle, color: info.textColor }}>{info.text}</span>
        </div>
      )
    };

    return (
      <Modal
        title="切换模型"
        visible={visible}
        onCancel={this.cancelModal}
        onOk={this.doOk}
        width={650}
        footer={
          <div>
            {
              showPart === "show" ? (
                <div>
                  <Button type="primary" ghost onClick={this.cancelModal}>取消</Button>
                  <Button type="primary" onClick={this.doNext}>下一步</Button>
                </div>
              ) :
                showPart === "test" ?
                  testResult.type == 1 ? (
                    <Button type="primary" ghost onClick={this.cancelModal}>取消</Button>
                  ) :
                    testResult.type == 2 ? (
                      <Button type="primary" onClick={this.cancelModal}>确定</Button>
                    ) :
                      testResult.type == 3 ? (
                        <div>
                          <Button type="primary" ghost onClick={this.cancelModal}>取消</Button>
                          <Button type="primary" onClick={this.doCheck}>确认切换</Button>
                        </div>
                      )
                        : ''
                  :
                  <Button type="primary" onClick={this.cancelModal}>确定</Button>
            }
          </div>
        }
      >
        {
          showPart === "show" ? (
            <div className={styles.changeBox}>
              <div className={styles.currentBox}>
                <img src={changeIcon} />
                <div className={styles.tips}>当前生效模型</div>
                <div className={styles.currentModel}>{currentModelName}</div>
              </div>
              <div className={styles.icons}>
                <Icon type="swap" style={{ fontSize: '20px', color: " #3E5BFF" }} />
              </div>
              <div className={styles.nextBox}>
                <img src={changeIcon} />
                <div className={styles.tips}>当前切换模型</div>
                <div className={styles.nextModel}>{nextModel.name}</div>
              </div>
            </div>
          ) :
            showPart === "test" ? (
              <div style={{ textAlign: "center" }}>
                {
                  renderTips()
                }

                <Progress percent={percent} strokeColor="#3E5BFF" status="active" />


                <div className={styles.testTips}>
                  {
                    testResult.type == 2 ? "测试响应失败，请检查请求地址或token是否正确" :
                      testResult.type == 3 ? "测试响应成功，是否确认切换至当前模型？切换过程需要等待几分钟时间" : ''
                  }
                </div>
              </div>
            ) : ''
        }

      </Modal>
    )
  }
}

export default ChangeModel